<template>
<view class="page" id="dddindex" :style="isOk?'':'display:none'"> 
	<!-- 顶部处理 -->
	<view class='nav' :style="'height:'+(navH1+10)+'px;'">
		<view class="input_view" :style="'position:absolute;left:10px;top:'+(navH-5)+'px;height:'+ (navH2+10)+'px'">
			<view class="input_view"  :style="'height:'+ (navH2+10)+'px'">
				<image class="logo_top logo_top_l" src="http://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/zhongxiang/wxapplogo1.jpg" mode=""></image>
				<!-- <image class="logo_top" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/dasdsadas.png" mode="heightFix"></image> -->
				<!-- <view class="name_top" style="">投资钟祥</view> -->
				<image class="logo_top1" @click="toDzmp" src="~@/static/image/index_dzmp.png" mode="widthFix"></image>
			</view>
		</view>
	</view>
	<!-- <cover-view class='nav' :style="'height:'+(navH1+10)+'px;'">
		<cover-view class="input_view" :style="'position:absolute;left:10px;top:'+(navH-5)+'px;height:'+ (navH2+10)+'px'">
			<cover-view class="input_view"  :style="'height:'+ (navH2+10)+'px'">
				<cover-image class="logo_top logo_top_l" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/75686786.jpg" mode=""></cover-image>
				<cover-view class="name_top" style="">一码投钟祥</cover-view>
				<cover-image class="logo_top1" @click="toDzmp" src="~@/static/image/index_dzmp.png" mode="widthFix"></cover-image>
			</cover-view>
		</cover-view>
	</cover-view> -->
	<view :style="'height:'+navH1+'px;width:100%'"></view>
	<!-- 顶部搜索 -->
	<view class="input_div">
		<image class="ss" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/index/index_ss.png" mode=""></image>
		<input class="ss_text" placeholder="可搜项目、园区、企业、政策等" confirm-type="search" @confirm="toList"/>
		<picker class="ss_type" @change="bindPickerChange" :value="typeIndex" :range="type">
			<text >{{ type[typeIndex]}}</text> 
			<image  src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/index/xiala.png" mode=""></image>
		</picker>
		
	</view>
	<!-- 轮播视频图 -->
	<view class="swiper_div" :style="'height:' +s_height+'px'">
		<swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :interval="4000" :duration="500">
			<swiper-item v-for="(item,index) in swiperImg" :key="index">
				<view class="swiper-item" >
					<video v-if="item.type==1" :muted='true' show-mute-btn :autoplay="true" id="myVideo" @play='isAuto=false' :src="item.url" controls  :style="'height:' +s_height+'px'" ></video>
					<!-- :style="'background:'+ (index==0?'#f93':index==1?'#00ff33':'#15c1ff')" -->
					<image v-else class="image" :src="item.img" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
	<!-- 最新资讯 -->
	<view class="zx_div" v-if="isXs">
		<image @click="toPage('newsList')" class="image" src="~@/static/image/index/zx_icon.png" mode="widthFix"></image>
		<view class="news">
			<view class="news_item" @click="toNewsDetail(item.id)" :class="[animate?'anim':'']" :style="'top:'+item.top||'0px'" v-for="(item,index) in newsList" :key='index'>{{item.title}}</view>
		</view>
	</view>
	<!-- 首页入口按钮 -->
	<view class="btn_div">
		<view class="btn_item" :class="item.bg" v-for="(item,index) in menuList" :key="index" @click="toPage(item.url)">
			<view class="">{{item.name}}</view>
			<image :src='item.img' mode=""></image>
		</view>
		<!-- <view class="btn_item" v-for="(item,index) in menuList" :key="index" @click="toPage(item.url)">
			<image :src='item.img' mode=""></image>
			<view class="">{{item.name}}</view>
		</view> -->
	</view>
	<!-- 主导产业 -->
	<view class="title">主导产业</view>
	<view class="flex_w flex">
		<view class="chain_item" v-for="(item,index) in chainList" :key="index" @click="toChainDetail(item)">
			<image :src='item.img' mode=""></image>
			<view class="chain_text">{{item.chain_name}}</view>
		</view>
	</view>
	
	
	<view class="swiper_div swiper_div1" v-if="isXs">
		<swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :interval="4000" :duration="500">
			<swiper-item v-for="(item,index) in ggList" :key="index">
				<view class="swiper-item" >
					<image v-if="item.img" class="image" :src="item.img" mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
	
	<!-- 最新资讯 -->
	<view class="zx_div" v-if="isXs">
		<image @click="toPage('zsList')" class="image" src="https://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/ganzhouwoyaozhaoshang.png" mode="widthFix"></image>
		<view class="news">
			<view class="news_item" @click="toZsDetail(item)" :class="[animate1?'anim':'']" :style="'top:'+item.top||'0px'" v-for="(item,index) in zsList" :key='index'>{{item.title}}</view>
		</view>
	</view>
	
	<!-- 数字钟祥 -->
	<view class="title">数字钟祥</view>
	<view class="sz_div">
		<view class="sz_top flex">
			<view class="sz_top_item">
				<view class="sz_top_text" @click="toMap('park')"> 全部园区<text class="sz_top_num">{{' ' + totalNum[0]}}</text></view>
				<view class="sz_top_text" @click="toMap('project')">全部项目<text class="sz_top_num">{{' ' + totalNum[1]}}</text></view>
			</view>
			<view class="sz_top_item">
				<view class="sz_top_text" @click="toMap('park2')">全部楼宇<text class="sz_top_num">{{' ' + totalNum[2]}}</text></view>
				<view class="sz_top_text" @click="toMap('park3')">全部地块<text class="sz_top_num">{{' ' + totalNum[3]}}</text></view>
			</view>
			<image class="img" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/index/mapIcon.png" mode="widthFix"></image>
		</view>
		<view class="mapImg">
			<chainMap ref="chainMap" type='park'></chainMap>
		</view>
		
		<view class="sz_type flex_sb">
			<view @click="changeSzType(item.id)" class="sz_type_item" :class="{item_isActive:sz_type==item.id}" v-for="item in szTypeList" :key="item.id">{{item.name}}</view>
		</view>
		<view class="charts-box">
			<qiun-data-charts 
				v-if="isShow&&sz_type!=3"
				:type="'area'"
				:opts="line"
				:chartData="chartData.data"
			/>
			<qiun-data-charts
				v-if="isShow&&sz_type==3"
				:type="'column'"
				:opts="bar"
				:chartData="chartData.data"
			/>
		</view>
	</view>
	<!-- 底部列表 -->
	<view class="bottom_list">
		<view class='flex type_div'>
			<view @click="changeType(item)" class="listType" :class="type_name==item.id?'active_item':''" v-for="(item,index) in listType" :key="index">{{item.name}}</view>
		</view>
		<toplist :isSS='false' :type='type_name' :isshow='isshow' @showChain='showChain' @changeQuery='changeQuery'></toplist>
		<listPage :type_name='type_name' height='calc(100% - 90px)' :isMore='true' :list='list' :total='total' @toMore='toMore' @getMore='getMore'>
			<endlist :isLoad='isLoad' :isfinsh='isfinsh' :length='list.length'></endlist>
		</listPage>
	</view>
	<view class="" v-if="isBottom" style="height: 80px;width: 100%;"></view>
	<view class="" v-else style="height: 60px;width: 100%;"></view>
	<!-- 底部导航栏 -->
	<Tabbar current="0" v-if="isXs"></Tabbar>
	
	<!-- 右侧导航 -->
	<rightXf v-if="isXs"></rightXf>
	
	<view class="mark" v-if="isXs&&isOne==1&&(isCz1||isCz2||isCz3||isCz4||isCz5)">
		<image :style="'top:'+(parseInt(navH1)+40)+'px'" class="cz1" @click="isCz1=false;isCz2=true" v-if='isOne==1&&isCz1' src="https://bigdataapi.parkic.com/static/images/cz7.png" mode="widthFix"></image>
		<image :style="'top:'+(parseInt(s_height)+parseInt(navH1)+130)+'px'" class="cz2" @click="isCz2=false;isCz3=true" v-if='isOne==1&&isCz2' src="https://bigdataapi.parkic.com/static/images/cz8.png" mode="widthFix"></image>
		<image @click="isCz3=false;isCz4=true" class="cz3" v-if='isOne==1&&isCz3' src="https://bigdataapi.parkic.com/static/images/cz9.png" mode="widthFix"></image>
		<image class="cz4" :style="paddingBottomHeight?'bottom:80px':''" @click="isCz4=false;isCz5=true" v-if='isOne==1&&isCz4' src="https://bigdataapi.parkic.com/static/images/cz10.png" mode="widthFix"></image>
		<image class="cz5" :style="paddingBottomHeight?'bottom:80px':''" @click="changeCz" v-if='isOne==1&&isCz5' src="https://bigdataapi.parkic.com/static/images/cz11.png" mode="widthFix"></image>
	</view>
</view>
</template>

<script setup>
	import {line,bar} from '@/utils/charts.js'
	import {onShareAppMessage,onShow} from '@dcloudio/uni-app';
	const style = reactive({
		background:'red'
	})
	// const props = defineProps({
	//   foo,
	//   bar,
	// })
	import Tabbar from '@/components/tabbar.vue'
	import chainMap from '@/components/chainMap.vue'
	import rightXf from '@/components/right_xf/right_xf.vue'
	import listPage from '@/components/listPage.vue'
	import endlist from '@/components/endlist.vue'
	import toplist from '@/components/toplist.vue'
var icon1 = 'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/index/icon1.png'
var icon2 = 'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/index/icon2.png'
var icon3 = 'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/index/icon3.png'
var icon4 = 'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/index/icon4.png'
var icon5 = 'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/index/icon5.png'
var icon6 = 'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/index/icon6.png'
var icon7 = 'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/index/icon7.png'
var icon8 = 'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/index/icon8.png'

import icon11 from '~@/static/image/index/icon11.png'
import icon22 from '~@/static/image/index/icon22.png'
import icon33 from '~@/static/image/index/icon33.png'
import icon44 from '~@/static/image/index/icon44.png'


	// import icon5 from 'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/index/c_icon1.png'
	import {GetVersionStatus,getGanzhouNeedsList , video, hkroom,citySj,news,GetMainNavsImgs,parklist,localprojects,policy,companylist,GetSuCitysList} from '@/utils/api.js'
	
	
	const ggList = reactive([
		{img:'https://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/zhongxiang/dsafgfdsgfdfg.png'},
	])
	
	
	const isLoad = ref(false) 
	const isshow = ref(false) 
	let isAuto = ref(true)
	let  listQuery = reactive({})
	const isfinsh = ref(false)
	const total = ref(0)
	var page = 1
	var list =reactive([])
	var type_name = ref('park')
	var totalNum = reactive([0,0,0,0])
	
	var newsList = reactive([])
	var zsList = reactive([])
	
	var animate = ref(false)
	var animate1 = ref(false)
	var time = null
	
	var isCz1 = ref(true)
	var isCz2 = ref(false)
	var isCz3 = ref(false)
	var isCz4 = ref(false)
	var isCz5 = ref(false)
	var isOne = ref(uni.getStorageSync('isOne'))
	
	function changeCz(){
		isCz5.value=false
		uni.setStorageSync('isOne',2)
		isOne.value = uni.getStorageSync('isOne')
	}
	
	let paddingBottomHeight = ref(0)
	uni.getSystemInfo({
	    success: function (res) {
	        let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
	        model.forEach(item => {
	            //适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
	            if(res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
	                paddingBottomHeight.value = 40;
	            }
	        })
	    }
	});
	
	function toMore(){
		let page = type_name.value + 'List'
		uni.navigateTo({
			url:`/pages/${page}/${page}?chain_id=${listQuery.chain_id||''}`
		})
	}
	function showChain(){
		if(isshow.value == true){
			isshow.value = false
			return
		}
		isshow.value=true
	}
	function changeQuery(data){
		listQuery = Object.assign(listQuery,data)
		page = 1
		list.length = 0
		isfinsh.value = false
		showChain()
		getList()
	}
	onShow(()=>{
		let city = uni.getStorageSync('chooseCity')
		if( (listQuery.city_id==city.id)){
			return
		}else{
			listQuery.city_id = city.id||''
			page = 1
			list.length = 0
			isfinsh.value = false
			getList()
		}
	})

	onShareAppMessage(()=>{
		return {
			title: '一码投钟祥   欢迎您',
		}
	})
	
	function toMap(type){
		uni.setStorageSync('type',type)
		uni.switchTab({
			url:`/pages/mapPage/mapPage`
		})
	}
	
	function toDzmp(){
		if((!uni.getStorageSync('token')||!uni.getStorageSync('userinfo')||uni.getStorageSync('userinfo').length<=2 || uni.getStorageSync('userinfo')==null || uni.getStorageSync('userinfo')=='null')){
			uni.showModal({
				title:'提示',
				content:'该功能需要登录',
				showCancel:true,
				success:e=>{
					if(e.confirm){
						uni.switchTab({
							url:'/pages/my/my'
						})
					}
				}
			})
			return
		}else{
			uni.navigateTo({
				url:`/pages/dzmp/dzmp`
			})
		}
	}
	
	
	function toList(e){
		let url_a = typeIndex.value==0?'/pages/projectList/projectList':
							typeIndex.value==1?'/pages/parkList/parkList':
							typeIndex.value==2?'/pages/companyList/companyList':'/pages/policyList/policyList'
		console.log(url_a)
		 uni.navigateTo({
			url: url_a + '?keywords=' + e.detail.value
		 })
	}
	
	function toNewsDetail(id){
		uni.navigateTo({
			url:`/pages/newsDetail/newsDetail?id=${id}`
		})
	}
	 
	function toZsDetail(item){
		uni.navigateTo({
			url:`/pages/zsList/zsDetail?item=${JSON.stringify(item)}`
		})
	} 
	
	
	function dong(){
		if(!newsList){
			return
		}
		if(time){
			clearInterval(time)
		}
		let that = this
		time = setInterval(()=>{
			newsList.forEach(item => {
				item.top='-58px';
			});
			animate.value=!animate.value
			setTimeout(()=>{
				newsList.push(newsList[0]);
				newsList.shift();
				newsList.forEach(item => {
					item.top='0px';
				});
				animate.value=!animate.value // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
			},500)
		},3000)
	}
	
	function dong1(){
		console.log(zsList)
		if(!zsList){
			return
		}
		if(time){
			clearInterval(time)
		}
		let that = this
		time = setInterval(()=>{
			zsList.forEach(item => {
				item.top='-58px';
			});
			animate1.value=!animate1.value
			setTimeout(()=>{
				zsList.push(zsList[0]);
				zsList.shift();
				zsList.forEach(item => {
					item.top='0px';
				});
				animate1.value=!animate1.value // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
			},500)
		},3000)
	}
	
	onBeforeUnmount(()=>{
		clearInterval(time)
	})
	
	// 数字类型
	var szTypeList = [
		{name:'GDP',id:'0'},
		{name:'人口',id:'1'},
		{name:'三产产值',id:'2'},
		{name:'重点产业产值',id:'3'},
	]
	var sz_type = ref('0')
	var isShow = ref(false)
	var chartData = reactive({data:{}})
	var swiperImg = reactive([1,2])
	
	
	function changeSzType(type){
		isShow.value = false
		sz_type.value = type
		let data = {
			city_id:uni.getStorageSync('myCity').id
		}
		let api = ''
		var option = {
			categories: [],
			series: type==0? [{name:'GDP（亿）',data:[]}]:
							type==1? [{name:'人数（万）',data:[]}]:
							type==2? [{name:'第一产业',data:[]},{name:'第二产业',data:[]},{name:'第三产业',data:[]}]:
							type==3? [{name:'产值（亿）2022',data:[]}]:[]
		}
		api = type==0 ? citySj.getCityGdpList(data) :
					type==1 ? citySj.getCityPeopleList(data) :
					type==2 ? citySj.getCityThreeChainValuesList(data) :
					type==3 ? citySj.getCityChainValuesList({...data,year:2022}) :''
		api.then(res=>{
			let showData = type!=2?res.data.slice(0,5):res.data
			showData.forEach(item=>{
				if(type==3){
					option.categories.unshift(item.chain_name.length>4?item.chain_name.substring(0,4):item.chain_name)
				}else{
					option.categories.unshift(item.year)
				}
				option.categories = [...new Set(option.categories)]
				if(type!=2){
					option.series[0].data.unshift(parseFloat(item.number||item.value).toFixed(2))
				}else{
					console.log(item.chain_num,item.value)
					if(item.chain_num==1){
						option.series[0].data.unshift(parseFloat(item.value).toFixed(2))
					}
					if(item.chain_num==2){
						option.series[1].data.unshift(parseFloat(item.value).toFixed(2))
					}
					if(item.chain_num==3){
						option.series[2].data.unshift(parseFloat(item.value).toFixed(2))
					}
				}
			})
			chartData.data = JSON.parse(JSON.stringify(option))
			isShow.value = true
		})
	}
	

	let s_height = ref(200)
	onBeforeMount(()=>{
		let getWindowInfo = uni.getWindowInfo()
		s_height.value = (getWindowInfo.windowWidth - 30)*164/290 
		uni.hideTabBar({
				animation: false
		})
		getList()
	})
	var isOk = ref(false)
	var isXs = ref(false)
	onMounted(async ()=>{	
		if(!uni.getStorageSync('myCity').city_name||!uni.getStorageSync('myChain')){
			return
		}
		
		GetVersionStatus({version:'8.36'}).then(res=>{
			if(res.status==1){
				isXs=true
			}else{
				menuList = [
					{name:'来榕投资第一站',img:icon11,url:'localGk',bg:'btnbg1'},
					{name:'产业生态规划师',img:icon44,url:'chainList',bg:'btnbg3'},
				]
			}
		})
		
		setTimeout(()=>{
			isOk.value = true
		},200)
		var data = {
			city_id:uni.getStorageSync('myCity').id,
		}
		//数据
		parklist(data).then(res=>totalNum[0]=res.data.total)
		// hkroom.getList(data).then(res=>totalNum[1]=res.data.total)
		
		// parklist({...data,type:1}).then(res=>totalNum[1]=res.data.total)
		parklist({...data,type:2}).then(res=>totalNum[2]=res.data.total)
		parklist({...data,type:3}).then(res=>totalNum[3]=res.data.total)
		
		// companylist({...data,label_id:50150}).then(res=>totalNum[2]=res.data.total)
		localprojects.getList(data).then(res=>totalNum[1]=res.data.total)
		//数据报表
		changeSzType(0)
		
		//新闻
		news.GetNewsList({city_id:uni.getStorageSync('myCity').id}).then(res=>{
			newsList = res.data.data
			
			newsList.forEach(item => {
				item.top='-58px';
			});
			animate.value=!animate.value
			setTimeout(()=>{
				newsList.push(newsList[0]);
				newsList.shift();
				newsList.forEach(item => {
					item.top='0px';
				});
				animate.value=!animate.value // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
			},500)
			
			dong()
		})
		
		//我要招商
		getGanzhouNeedsList({role_id:uni.getStorageSync('role_id'),type_id:2,status:1}).then(res=>{
			zsList = res.data.data
			
			zsList.forEach(item => {
				item.top='-58px';
			});
			animate1.value=!animate1.value
			setTimeout(()=>{
				zsList.push(zsList[0]);
				zsList.shift();
				zsList.forEach(item => {
					item.top='0px';
				});
				animate1.value=!animate1.value // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
			},500)
			
			dong1()
		})
		
		//轮播
		video.getList({ id: uni.getStorageSync('role_id'), status: 1 }).then(res => {
			swiperImg = res.data.data
		})
		// GetMainNavsImgs().then(res=>{
			
		// })
	})
	const city_name = uni.getStorageSync('myCity').city_name.split('省')[0].split('市')[0].split('区')[0].split('县')[0]
	
	var isBottom = uni.getStorageSync('bottom')
	var navH = ref(uni.getStorageSync('navH'))
	var navH1 = ref(uni.getStorageSync('navH1'))
	var navH2 = ref(uni.getStorageSync('navH2'))
	
	//轮播颜色
	var background = ['color1', 'color2', 'color3']
	
	var type = reactive(['项目','园区','企业','政策'])
	var typeIndex = ref(0)
	//切换头部搜索类型
	function bindPickerChange(e){
		typeIndex.value = e.detail.value
	}
	
	//menu列表
	var menuList = [
		{name:'投资指南',img:icon22,url:'localGk',bg:'btnbg1'},
		{name:'重点产业',img:icon11,url:'chainList',bg:'btnbg1'},
		// {name:'重点园区',img:icon22,url:'parkList',bg:'btnbg2'},
		{name:'重点政策',img:icon33,url:'policyList',bg:'btnbg1'},
		{name:'重点项目',img:icon44,url:'projectList',bg:'btnbg3'},
		// {name:'重点园区',img:icon2,url:'parkList',bg:'btnbg2'},
		// {name:'重点项目',img:icon4,url:'projectList',bg:'btnbg3'},
		// {name:'重点政策',img:icon3,url:'policyList',bg:'btnbg1'},
		
		// {name:'钟祥概况',img:icon1,url:'localGk',bg:'btnbg1'},
		// {name:'园区招商',img:icon2,url:'parkList',bg:'btnbg2'},
		// {name:'企业招商',img:icon3,url:'companyList',bg:'btnbg3'},
		// {name:'政策招商',img:icon4,url:'policyList',bg:'btnbg4'},
		// {name:'资本招商',img:icon5,url:'zibenPage',bg:'btnbg5'},
		// {name:'会议招商',img:icon6,url:'huiyiPage',bg:'btnbg6'},
		// {name:'项目招商',img:icon7,url:'projectList',bg:'btnbg7'},
		// {name:'直通车',img:icon8,url:'companyFw',bg:'btnbg8'},
	]
	
	//产业链
	var chainList =reactive(uni.getStorageSync('myChain'))
	function toChainDetail(chain){
		uni.navigateTo({
			url:'/pages/chainDetail/chainDetail?chain='+JSON.stringify(chain)
		})
	}
	
	// 底部列表
	var listType = [
		// {name:'区县',id:'city'},
		{name:'园区',id:'park'},
		// {name:'项目',id:'project'},
		{name:'政策',id:'policy'},
		{name:'企业',id:'company'},
	]

	
	//切换底部列表
	function changeType(e){
		type_name.value = e.id
		console.log(e.id,type_name.value)
		page = 1
		list.length = 0
		isfinsh.value = false
		getList()
	}
	function getMore(){
		page += 1
		getList()
	}

	//切换底部列表
	function getList(){
		if(isfinsh.value){
			return
		}
		var data = {
			city_id:uni.getStorageSync('myCity').id,
			page,
			lat:uni.getStorageSync('lat'),
			lng:uni.getStorageSync('lng'),
			...listQuery
		}
		console.log(listQuery)
		if(listQuery.paixu!=2&&type_name.value == 'company'){
			data.lat=''
			data.lng=''
		}
		
		isLoad.value = true
		var api = type_name.value == 'city'?GetSuCitysList(data):
							type_name.value == 'park'?parklist(data):
							type_name.value == 'project'?localprojects.getList(data):
							type_name.value == 'policy'?policy.getList(data):
							type_name.value == 'company'?companylist(data):''
		api.then(res=>{
			if(type_name.value == 'city'){
				list.push(...res.data)
				isfinsh.value = true
				isLoad.value = false
				return
			}
			list.push(...res.data.data)
			isLoad.value = false
			total.value = res.data.total
			if(res.data.last_page == page){
				isfinsh.value = true
			}
		}) 
	}
	// 跳转页面  
	function toPage(url){
		uni.navigateTo({
			url:`/pages/${url}/${url}`
		})
	}
	
</script>
<style scoped lang="scss">
page{
	height: 100%;
	width: 100%;
}
.page {
	height: 100%;
	// background-color:v-bind('style.background');
	width: calc(100% - 30px);
	margin: 0 15px;
	.nav{
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #fff;
		z-index: 1000;
		transition: all 0.5s;
	}
	.input_view{
		display: flex;
		align-items: center;
		border-radius: 2px;
		color: #333;
		width: 100%;
		.logo_top{
			height: 40px;
			width: 125px;
			margin-right: 12px;
			margin-left: 7px;
		}
		.logo_top_l{
			height: 40px;
			width: 100px;
			margin-right: 12px;
			margin-left: 7px;
		}
		.logo_top1{
			width: 44px;
			height: 26px;
			// margin-left: 10px;
		}
		.name_top{
			font-size: 20px;
			font-weight: 500;
			min-width:100px;
			margin-right: 10px;
		}
	}
}
.input_div{
	width: 100%;
	height: 34px;
	opacity: 1;
	border-radius: 10px;
	background: #f6f6f6;
	margin: 10px auto 15px;
	display: flex;
	position: relative;
	align-items: center;
	.ss{
		position: relative;
		width: 16px;
		height: 16px;
		margin: 0 12px 0 12px;
	}
	.ss_text{
		font-size: 12px;
		color: #333;
		width: calc(100% - 140px);
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		&::-webkit-input-placeholder {
			color:  rgba(197, 197, 197, 1);
		}
	}
	.ss_type{
		position: absolute;
		right: 12px;
		color: rgba(0, 145, 255, 1);
		font-weight: 800;
		font-size: 12px;
		display: flex;
		align-items: center;
		width: 70px;
		text{
			display: inline-block;
			width: 50px;
		}
		image{
			height: 12px;
			width: 12px;
			margin-left: 6px;
			position: relative;
			top: 2px;
		}
		&::before{
			position: absolute;
			content: ' ';
			height: 16px;
			width: 2px;
			background: #eee;
			left: -10px;
		}
	}
}
.swiper_div{
	width: 100%;
	border-radius: 12px;
	overflow: hidden;
	.swiper {
		height: 100%;
	}
	.swiper-item {
		display: block;
		height: 100%;
		text-align: center;
		image{
			width: 100%;
			height: 100%;
		}
		#myVideo{
			width: 100%;
		}
	}
}

.swiper_div1{
	border-radius: 4px;
	height: 90px !important;
	margin: 30px 0 40px;
	box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

.btn_div{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 15px 0;
	// .btn_item{
	// 	width: calc(50% - 5px);
	// 	margin-bottom: 10px;
	// 	border-radius: 8px;
	// 	text-align: center;
	// 	padding: 10px 0;
	// 	color: #666;
	// 	font-size: 14px;
	// 	image{
	// 		width: 42px;
	// 		height: 42px;
	// 		margin-bottom: 6px;
	// 	}
	// }
	.btn_item{
		box-shadow: 0px 1px 4px 0px rgba($color: #000, $alpha: .2);
		width: calc(50% - 5px);
		margin-bottom: 10px;
		border-radius: 8px;
		text-align: center;
		padding: 22px 0;
		color: #444;
		font-weight: 800;
		font-size: 16px;
		display: flex;
		justify-content: center;
		align-items: center;
		image{
			width: 26px;
			height: 26px;
			margin-left: 8px;
			// margin-bottom: 2px;
		}
	}
	// .btnbg1{
	// 	background: rgba($color: #0091FF, $alpha: .1);
	// 	box-shadow: 0px 1px 2px 0px rgba($color: #0091FF, $alpha: .2);
	// }
	// .btnbg2{
	// 	background: rgba($color: #C75CDD, $alpha: .1);
	// 	box-shadow: 0px 1px 2px 0px rgba($color: #C75CDD, $alpha: .2);
	// }
	// .btnbg3{
	// 	background: rgba($color: #2DD890, $alpha: .1);
	// 	box-shadow: 0px 1px 2px 0px rgba($color: #2DD890, $alpha: .2);
	// }
}

.title{
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 1px;
	color: #333;
	padding: 10px 0 20px;
}
.chain_item{
	width: 24%;
	text-align: center;
	color: #666;
	font-size: 12px;
	margin-bottom: 15px;
	.chain_text{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	image{
		width: 42px;
		height: 42px;
		margin-bottom: 4px;
	}
}
// #ifdef APP-PLUS
.bottom_list{
	height: 580px;
}
// #endif

// #ifndef APP-PLUS
.bottom_list{
	height: calc(100% - 180px);
	margin-top: 40px;
}
// #endif
.index_list{
	height: calc(100% - 50px);
	position: relative;
}
.type_div{
	background-color: #fff;
}
.listType{
	width: 25%;
	text-align: center;
	height: 50px;
	line-height: 50px;
	background: #fff;
}
.active_item{
	font-size: 18px;
	position: relative;
	font-weight: bold;
	&::before{
		content: ' ';
		position: absolute;
		bottom: 4px;
		height: 3px;
		width: 60px;
		background-color: #C79D5E;
		border-radius: 3rpx;
		left: 50%;
		transform: translateX(-50%);
	}
}

.list_item{
	width: calc(100% - 30px);
	// min-height: 100px;
	padding: 10px;
	border-radius: 8px;
	box-shadow: 0px 1px 10px 0px #0A477519;
	margin: 20px 5px;
	position: relative;

	.img{
		width: 120px;
		height: 90px;
		border-radius: 6px;
		overflow: hidden;
		position: relative;
		box-shadow: 0 0 5px 0 rgba(0, 0,0, 0.1);
		.logo_name{
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			background: #0091FF;
			color: #fff;
		}
		image{
			width: 100%;
			height: 100%;
		}
		.img_level{
			position: absolute;
			top: 6px;
			left: 0px;
			padding: 2px 8px;
			border-radius: 4px;
			background: linear-gradient(135deg,#0091FF33,#0091FF);
			font-size: 12px;
			color: #fff;
		}
	}
	.right_div{
		width: calc(100% - 130px);
		.r_title{
			font-size: 16px;
			color: #333;
		}
	}
	.chain_view{
		background-color: #ECF3FF;
		color: #3D7CE2;
		padding: 0 4px;
		height: 16px;
		line-height: 16px;
		border-radius: 2px;
		font-size: 12px;
		margin: 8px 5px 0 0;
		display: inline-block;
	}
	.add_view{
		display: flex;
		font-size: 12px;
		margin-top: 6px;
		color:#999;
		image{
			max-width: 14px;
			min-width: 14px;
			height: 14px;
			margin-right: 6px;
			margin-top: 1px;
		}
	}
	.color_red{
		color: #f1340e;
	}
	.div100{
		width: 100%;
	}
}


.sz_div{
	width: calc(100% - 20px);
	border-radius: 13px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(227, 195, 148, 1) 100%);
	// background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(205, 228, 255, 1) 100%);
	box-shadow: 0px 1px 10px 0px rgba(10, 71, 117, 0.12);
	padding: 10px;
	.sz_top{
		font-size: 12px;
		// font-weight: bold;
		color: #333;
		position: relative;
		.sz_top_item{
			width: 37%;
			.sz_top_text{
				margin: 4px 0;
			}
			.sz_name{
				display: inline-block;
				Text-align:justify;
				text-align-last:justify;
				min-width: 60px;
				max-width: 60px;
			}
			.sz_top_num{
				font-size: 18px;
				color: #C79D5E;
				position: relative;
				bottom: -1px;
				font-weight: 400;
			}
		}
		.img{
			width: 30%;
			position: absolute;
			right: -14px;
			top: -8px;
		}
	}
	.mapImg{
		// margin: 10px 0 10px;
		.img{
			width: 100%;
			border-radius: 12px;
			border: 1px solid rgba(255, 255, 255, 1);   
			overflow: hidden;
		}
	}
	.sz_type{
		height: 32px;
		width: calc(100% - 6px);
		background-color: rgba(201, 160, 99, 1);
		border-radius: 8px;
		overflow: hidden;
		color: #e1e1e1;
		align-items: center;
		padding: 0 3px;
		.sz_type_item{
			height: 26px;
			line-height: 26px;
			padding: 0 10px;
			font-size: 14px;
			transition: all 0.5s;
		}
		.item_isActive{
			background: rgba(133, 95, 38, 1);
			color: #fff;
			border-radius: 5px;
		}
	}
	.charts-box{
		width: 100%;
		height: 200px;
		margin-top: 10px;
		border-radius: 4px;
		background: rgba(255, 255, 255, 1);
	}
}
.zx_div{
	margin: 14px 0 10px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 1);
	box-shadow: 0px 1px 10px 0px rgba(0, 145, 255, 0.1);
	position: relative;

	.image{
		width: 100%;
		height: 40px;
		position: absolute;
		left: 0;
		top: 0;
	}
	.news{
		height: 60px;
		width: calc(100% - 100px);
		overflow: hidden;
		position: relative;
		left: 100px;
		margin-bottom: 20px;
	}
	.news_item{
		font-size: 14px;
		padding: 9px 0;
		height: 40px;
		color: #666;
		line-height: 20px;
		width: 100%;
		position: relative;
		
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
		// white-space: nowrap;
		// overflow: hidden;
		// text-overflow: ellipsis;
	}
}
.anim{
	transition: all 0.5s;
}

.mark{
	position: fixed;
	height: 100vh;
	width: 100vw;
	left: 0;
	top: 0;
	background: rgba(0, 0, 0, 0.3);
	z-index: 100001;
}
.cz1{
	position: absolute;
	z-index: 100;
	right: 30px;
	top: 120px;
	width: 160px;
	max-height: 60px;
}
.cz2{
	position: absolute;
	z-index: 100;
	left: 10px;
	top: 400px;
	width: 140px;
	max-height: 70px;
}
.cz3{
	position: absolute;
	z-index: 100;
	right: 5px;
	bottom: calc(25% - 40px);
	width: 160px;
	max-height: 60px;
}
.cz4{
	position: fixed;
	z-index: 100;
	left: calc(20% + 6px);
	bottom: 55px;
	width: 140px;
	max-height: 60px;
}
.cz5{
	position: fixed;
	z-index: 100;
	left: calc(60% + 10px);
	bottom: 55px;
	width: 140px;
	max-height: 60px;
}
</style>

